<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>原生JS实现购物车结算功能代码</title>
    <link rel="stylesheet" href="../css/style.css" />
</head>

<body>
    <div class="catbox">
        <table id="cartTable">
            <thead>
                <tr>
                    <th><label>
                            <input class="check-all check" type="checkbox" />&nbsp;&nbsp;全选</label></th>
                    <th>商品</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>小计</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                    <td class="goods"><img src="../images/1.jpg" alt="" /><span>Casio/卡西欧 EX-TR350</span></td>
                    <td class="price">5999.88</td>
                    <td class="count"><span class="reduce"></span>
                        <input class="count-input" type="text" value="1" />
                        <span class="add">+</span>
                    </td>
                    <td class="subtotal">5999.88</td>
                    <td class="operation"><span class="delete">删除</span></td>
                </tr>
                <tr>
                    <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                    <td class="goods"><img src="../images/2.jpg" alt="" /><span>Canon/佳能 PowerShot SX50 HS</span></td>
                    <td class="price">3888.50</td>
                    <td class="count"><span class="reduce"></span>
                        <input class="count-input" type="text" value="1" />
                        <span class="add">+</span>
                    </td>
                    <td class="subtotal">3888.50</td>
                    <td class="operation"><span class="delete">删除</span></td>
                </tr>
                <tr>
                    <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                    <td class="goods"><img src="../images/3.jpg" alt="" /><span>Sony/索尼 DSC-WX300</span></td>
                    <td class="price">1428.50</td>
                    <td class="count"><span class="reduce"></span>
                        <input class="count-input" type="text" value="1" />
                        <span class="add">+</span>
                    </td>
                    <td class="subtotal">1428.50</td>
                    <td class="operation"><span class="delete">删除</span></td>
                </tr>
                <tr>
                    <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                    <td class="goods"><img src="../images/4.jpg" alt="" /><span>Fujifilm/富士 instax mini 25</span></td>
                    <td class="price">640.60</td>
                    <td class="count"><span class="reduce"></span>
                        <input class="count-input" type="text" value="1" />
                        <span class="add">+</span>
                    </td>
                    <td class="subtotal">640.60</td>
                    <td class="operation"><span class="delete">删除</span></td>
                </tr>
            </tbody>
        </table>
        <div class="foot" id="foot">

            <a class="fl" id="deleteAll" href="javascript:;">删除</a>
            <div class="fr closing" onclick="getTotal();">结 算</div>
            <input type="hidden" id="cartTotalPrice" />
            <div class="fr total">合计：￥<span id="priceTotal">0.00</span></div>
            <div class="fr selected" id="selected">已选商品<span id="selectedTotal">0</span>件<span
                    class="arrow up">︽</span><span class="arrow down">︾</span></div>
            <div class="selected-view">
                <div id="selectedViewList" class="clearfix">
                    <div><img src="../images/1.jpg"><span>取消选择</span></div>
                </div>
                <span class="arrow">◆<span>◆</span></span>
            </div>
        </div>
    </div>
</body>
<script>
    var catbox = document.getElementsByClassName("catbox")[0];
    var checkAll = document.getElementsByClassName("check-all")[0];
    var checkOneList = document.getElementsByClassName("check-one");
    var countInputList = document.getElementsByClassName("count-input");


    for (let i = 0; i < countInputList.length; i++) {
        let countInput = countInputList[i];
        let originNum = null;

        countInput.onfocus = function () {
            originNum = this.value;
        }

        countInput.onchange = function () {
            var num = this.value;

            if (num >= 1 && num % 1 == 0) {

                // 减号处理
                var reduce = this.previousElementSibling;
                if (num == 1) {
                    reduce.textContent = "";
                } else {
                    reduce.textContent = "-";
                }


                var priceTd = this.parentElement.previousElementSibling; // 加号的父元素的前一个
                var subtotalTd = this.parentElement.nextElementSibling; // 加号的父元素的后一个

                // 如果有单位 记得去单位 "5999.88元" "¥5999.88"
                var price = priceTd.textContent;

                var subtotal = price * num;

                subtotalTd.textContent = subtotal.toFixed(2);
            } else {
                this.value = originNum;
            }


        }
    }

    catbox.onclick = function (e) {
        var e = e || window.event;
        var target = e.target || e.srcElement;
        console.log(target);

        // target => 触发事件的元素(事件源) => 委托事件的子代元素
        if (target.classList.contains("check-all")) {
            checkAllHandler(target);
            getTotal();
        } else if (target.classList.contains("check-one")) {
            isAllChecked()
            getTotal();
        } else if (target.className == "add") {
            addHandler()
            getTotal();
        } else if (target.className == "reduce") {
            reduceHandler(target);
            getTotal();
        } else if (target.className == "delete") {
            deleteOneHandler(target);
            isAllChecked();
            getTotal();
        } else if (target.id == "deleteAll") {
            deleteAllHandler();
            isAllChecked();
            getTotal();
        }

    }


    function checkAllHandler(target) {
        var status = target.checked;
        console.log(status);

        // 回调函数
        // 把一个函数当做参数传递到另一个函数中,让它在另一个函数中调用执行 => 传入时并不会执行,而是在另一个函数中通过参数调用执行 => 锦囊妙计(提前决定好要执行的内容,需要的时候执行)
        Array.from(checkOneList).forEach(function (checkOne) {
            checkOne.checked = status;
        })

    }

    function isAllChecked() {
        var flag = Array.from(checkOneList).every(function (item) {
            return item.checked == true; // true: 选中 false:未选中
        })
        checkAll.checked = checkOneList.length > 0 ? flag : false;
    }


    function addHandler(target) {
        // a. 输入框  数量 加一
        var countInput = target.previousElementSibling;
        var num = countInput.value; // 取值
        num++;  // 自增
        countInput.value = num; // 赋值回去
        // countInput.value++;

        // b. 小计更新  =  单价*数量
        var priceTd = target.parentElement.previousElementSibling; // 加号的父元素的前一个
        var subtotalTd = target.parentElement.nextElementSibling; // 加号的父元素的后一个

        // 如果有单位 记得去单位 "5999.88元" "¥5999.88"
        var price = priceTd.textContent;

        var subtotal = price * num;

        subtotalTd.textContent = subtotal.toFixed(2);

        // c. 减号按钮的 “-”  出现
        var reduce = countInput.previousElementSibling;
        reduce.textContent = "-";
    }

    function reduceHandler(target) {
        // a. 输入框  数量 减一
        var countInput = target.nextElementSibling;
        var num = countInput.value; // 取值
        // 减之前判断 如果数量已经为1 不能减
        if (num == 1) {
            alert("亲,不能在少了!");
            return false;
        };

        num--;  // 自减
        // 减之后判断  如果数量已经为1(2切1) 减号文本消失
        if (num == 1) {
            target.textContent = "";
        };



        countInput.value = num; // 赋值回去
        // countInput.value++;

        // b. 小计更新  =  单价*数量
        var priceTd = target.parentElement.previousElementSibling; // 加号的父元素的前一个
        var subtotalTd = target.parentElement.nextElementSibling; // 加号的父元素的后一个

        // 如果有单位 记得去单位 "5999.88元" "¥5999.88"
        var price = priceTd.textContent;

        var subtotal = price * num;

        subtotalTd.textContent = subtotal.toFixed(2);
    }


    function deleteOneHandler(target) {
        if (confirm("是否删除当前商品?")) {
            var parentTr = target.parentElement.parentElement;
            parentTr.remove();
        }
    }

    function deleteAllHandler() {
        for (var j = 0; j < checkOneList.length; j++) {
            var checkOne = checkOneList[j];
            if (checkOne.checked) {
                var parentTr = checkOne.parentElement.parentElement;
                parentTr.remove();
                j--;
            }
        }
    }

    function getTotal() {
        var sum = 0;  // 记录数量
        var allPrice = 0; // 记录总价

        // 从所有商品中 找到 被选中的checkOne => 找到该行的数量和小计 => 累加
        for (var j = 0; j < checkOneList.length; j++) {
            var checkOne = checkOneList[j];
            if (checkOne.checked) {
                var parentTr = checkOne.parentElement.parentElement;
                var countInput = parentTr.getElementsByClassName("count-input")[0];
                var subtotalTd = parentTr.getElementsByClassName("subtotal")[0];
                // console.log(checkOne, countInput, subtotalTd);

                var num = countInput.value * 1;
                var subtotal = subtotalTd.textContent * 1;

                sum += num;
                allPrice += subtotal;
            }
        }

        selectedTotal.textContent = sum;
        priceTotal.textContent = allPrice.toFixed(2);
    }
</script>

</html>